<template>
  <div class="swiper-block">
    <swiper class="swiper" :options="swiperOption" @slideChange="onSlideChange" ref="mySwiper">
      <!-- 优化一只显示前后2页内容 -->
      <template v-for="(item, index) in data">
        <swiper-slide
          class="swiper_slide_item"
          v-if="Array.from({ length: 5 }, (_, i) => (currentIndex - 2 + i + data.length) % data.length).includes(index)"
          :key="index"
        >
          <swiper-item :data="item" :pageIndex="index"></swiper-item>
        </swiper-slide>
        <swiper-slide class="swiper_slide_item" v-else :key="index"></swiper-slide>
      </template>
      <!-- <swiper-slide class="swiper_slide_item" v-for="(item, index) in data" :key="index">
        <swiper-item :data="item" :pageIndex="index"></swiper-item>
      </swiper-slide> -->
    </swiper>
    <van-row gutter="20">
      <van-col span="8">
        <div>默认:当前页面 {{ currentIndex }}</div></van-col
      >
      <van-col span="8"> <van-button type="primary" @click="jumpToXZGC">跳转列表新增改查</van-button></van-col>
    </van-row>

    <!-- 选中添加的商品 -->
    <h2>选中的商品</h2>
    <div class="selected-diashed">
      <van-tag
        plain
        type="primary"
        class="selected-tag"
        :style="{ color: getRandomColor() }"
        size="large"
        closeable
        @close="close"
        v-for="item in tags"
        :key="item.id"
      >
        <van-badge :content="item.num"> {{ item.name }}</van-badge>
      </van-tag>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import SwiperItem from './swiper-item.vue';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
let vm = null
export default {
  name: "SwiperPage",
  components: {
    SwiperItem,
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      currentIndex: 0,//默认
      swiperOption: {
        loop: true, //是否循环播放
        notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: 'horizontal',
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        centeredSlides: true,
        initialSlide: 1,  // 这里是重点。。
        on: {
          init: function () {
            console.log('当前的slide序号是' + this.activeIndex);
            console.log('当前的slide序号是' + this.realIndex);///或者swiper.activeIndex，swiper与this都可指代当前swiper实例
          },
          slideChange: function () {
            console.log('slideChanget', this.realIndex);
            vm.currentIndex = this.realIndex
          },
          click: function (e) { // 在此处实现相关业务逻辑
            // TODO:判断是否是clone节点 ---> 跳正确的节点
            console.log("%c Line:68 🍪 e", "font-size:18px;color:#ffffff;background:#f368e0", e);
            let info = e.target.getAttribute('data-info') // 获取自定义属性
            console.log("%c Line:70 🥶 tbbsm", "font-size:18px;color:#ffffff;background:#c23616", info);
            // _this.openDetailDialog(tbbsm)
            if (info) {
              vm.add(info)
            }
          },
        },
      }
    }
  },
  created () {
    vm = this
  },
  mounted () {
    this.getData();
  },
  computed: {
    tags () {
      return this.$store.state.cartShops
    },
    data () {
      return this.$store.state.diashes
    },

  },
  methods: {
    async getData () {
      const res = await axios.get(`https://mock.apifox.cn/m1/1149415-0-default/400Dishes`);
      const { data, success } = res.data;
      if (success) {
        //九宫格 九张图片一组 再分一个二维数组
        // 定义一个二维数组
        const result = []
        // 循环将 arr 分组
        for (let i = 0; i < data.length; i += 9) {
          // 使用 slice 方法获取每组 9 个元素
          const group = data.slice(i, i + 9)
          // 将每组元素添加到二维数组
          result.push(group)
        }
        this.$store.commit('add_total_foods', result);
        console.log("%c Line:24 🌮 add_total_foods", "font-size:18px;color:#ffffff;background:#273c75", result);
      }

    },
    add (item) {
      const item_obj = JSON.parse(item)
      this.$store.commit('add_diashes', item_obj);
    },
    jumpToXZGC () {
      this.$router.push({
        name: "xzgc"
      })
    },
    close () {

    },
    onSlideChange () {

    },
    getRandomColor () {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  },
}
</script>

<style lang="less" scoped>
.swiper-block {
  // margin-top: 46px;
}
::v-deep .selected-tag {
  padding: 10px 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.swiper {
  height: 300px;
  .swiper-slide {
    background-color: rebeccapurple;
  }
}
</style>